<template>
  <div class="wrapper">
    <minbar title="编辑地址" :isPadding="true"></minbar>
    <div class="x-cell">
        <text class="x-label">收货人</text>
        <div class="x-input-div">
            <input type="text" placeholder="请输入收货人姓名" class="x-input" 
            v-model="addressData.name" :value="addressData.name"/>
        </div>
    </div>
    <div class="x-cell">
        <text class="x-label">手机号码</text>
        <div class="x-input-div">
            <input type="text" placeholder="请输入收货人电话" class="x-input"
            v-model="addressData.mobile" :value="addressData.mobile"/>
        </div>
    </div>
    <div class="x-cell">
        <text class="x-label">所在地区</text>
        <div class="x-input-div" @click="selectDistrict">
            <text v-if="!districts" class="x-input-label color9">请选择地区</text>
            <text v-else type="text" class="x-input-label">{{districts}}</text>
        </div>
        <text class="iconfont x-right-icon">&#xe628;</text>
    </div>
    <div class="x-cell">
        <text class="x-label" style="height:150px;padding-top:25px;">详细地址</text>
        <div class="x-input-div">
            <textarea rows=3 placeholder="请输入详细地址" class="x-textarea" 
            v-model="addressData.address" :value="addressData.address"/>
        </div>
    </div>
    <div class="x-cell">
        <text class="x-label">设置默认地址</text>
        <div class="x-switch-div">
            <switch @change="defaultChange($event,v)"
            :checked="addressData.is_default"></switch>
        </div>
    </div>

    <button text="保存" 
        @buttonClick="saveBtn"
        :textStyle="{fontSize:32}" 
        :btnStyle="{width:750,marginTop:80,height:100}"></button>
    <x-popup :show="showDistrict" height="700" @popupClicked="closeDistrict">
      <div slot="popup_content" class="popup_content">
        <!-- 地区标题 -->
        <div class="x-dis-div">
            <text class="x-dis-title">请选择地区</text>
            <text class="x-dis-close iconfont" @click="closeDistrict">&#xe6a1;</text>
        </div>
        <district @selected="districtSelected"></district>
      </div>
    </x-popup>
  </div>
</template>

<script>
import asCore from "../../../common/js/core";
const navigator = weex.requireModule('navigator');
const address = new BroadcastChannel('address');
                
export default { 
  components: {
    "minbar" : require("../../../common/component/minbar.vue"),
    "button" : require("../../../common/component/button.vue"),
    "district":require("../../../common/component/district.vue"),
    "x-popup" : require("../../../common/component/popup.vue")
  },
  data() {
    return {
        rowid:"",
        type:"",
        addressData:{
            name:"",
            mobile:"",
            district_id:"",
            address:"", 
            is_default:false
        },
        districts:"",
        showDistrict:false,

    };
  },
  created() {
    var _this = this;
    var globalEvent = weex.requireModule('globalEvent') ;
    globalEvent.addEventListener("onPageInit", function (e) {
      var param = navigator.param();
      _this.rowid = param['rowid'];
      _this.type = param['type'];
      if(_this.type=="edit"){
          _this.getAddress();
      }
    });
  },
  methods: {
    /**获取数据 */
    getAddress(){
      asCore.post("/member/address/get",{id:this.rowid},(data,msg,flag)=>{
        if(flag==true){
          this.addressData = data;
          this.getDistricts(data.districts);
          if(!this.addressData['is_default']){
              this.addressData['is_default'] = false;
          }
        }
      });
    },
    /**获取地区 */
    getDistricts(data){
        if(!data) return;
        var address = "";
        for(var i=0;i<data.length;i++){
            address += data[i]['name'] + " ";
        }
        this.districts = address;
    },
    defaultChange(event,data){
        this.addressData['is_default'] = event.value;
    },
    /**保存数据校验 */
    saveBefore(){
        var data = this.addressData;
        if(!data['name']) {
            asCore.toast("请输入姓名");
            return false;
        }
        if(!data['mobile']) {
            asCore.toast("请输入手机号码");
            return false;
        }
        if(!data['district_id']) {
            asCore.toast("请选择地区");
            return false;
        }
        if(!data['address']) {
            asCore.toast("请输入详细地址");
            return false;
        }
        return true;
    },
    /**保存数据 */
    saveBtn(){
        if(!this.saveBefore()) return;
        var data = this.addressData;
        var param = {
            id:data['id'],
            name:data['name'],
            mobile:data['mobile'],
            district_id:data['district_id'],
            address:data['address'], 
            is_default:data['is_default']
        }
        var action = this.type=="edit"?"/member/address/update":"/member/address/create";
        if(this.type=="new"){
            delete param['id'];
        }
        asCore.post(action,param,(data,msg,flag)=>{
            //asCore.alert(msg)
            if(flag==true){
                asCore.toast("保存成功");
                address.postMessage("ok");
                navigator.back();
                //asCore.alert(JSON.stringify(data))
            }else{
                asCore.toast("保存数据失败!");
            }
        });
    },
    selectDistrict(){
        this.showDistrict = true;
    },
    /**关闭区域选择 */
    closeDistrict(){
        this.showDistrict = false;
    },
    districtSelected(data){
        var province = data['province']['name'];
        var city = data['city']['name'];
        var district = data['district']['name'];
        this.districts = province +" " + city + " " +district;
        if(province) this.addressData.district_id = data['province']['code'];
        if(city) this.addressData.district_id = data['city']['code'];
        if(district) this.addressData.district_id = data['district']['code'];
    }
  }
};
</script>
<style scoped>
.wrapper {
  background-color: #dedfe1;
  position: relative;
}
.iconfont {
    font-family:iconfont;
}
.color9 {
    color: #999;
}
.x-flex1 {
  flex: 1;
}
.x-cell {
    flex-direction: row;
    border-bottom-color: #dfdfdf;
    border-bottom-width: 1px;
    padding-left: 25px;
    padding-right: 25px;
    background-color: #fff;
    align-items: center;
}
.x-label {
    font-size: 32px;
    color: #68686a;
    width: 200px;
}
.x-input-div {
    flex: 1;
}
.x-input {
    height: 95px;
    line-height: 95px;
    font-size:32px;
    color: #1f1e23;
}
.x-textarea{
    padding-top:25px;
    padding-bottom: 25px;
    left: -9;
    height: 150px;
    font-size:32px;
    color: #1f1e23;
}
.x-input-label {
    height: 95px;
    line-height: 95px;
    font-size:32px;
    color: #1f1e23;
    lines:1;
    text-overflow:ellipsis;
}
.x-switch-div {
    flex: 1;
    height: 95px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}
.x-right-icon{
   color:#1f1e23;
   font-size: 35px;
   top:3px;
}
.popup_content {
    background-color: #fff;
}
.x-dis-div {
    height: 80px;
    position: relative;
}
.x-dis-title {
    height: 80px;
    line-height: 80px;
    width: 750px;
    text-align: center;
    font-size: 30px;
    color: #1f1e23;
}
.x-dis-close {
    position: absolute;
    right: 0px;
    top:0px;
    font-size:50px;
    padding-right: 15px;
    padding-left:15px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #636463;
}
</style>
